<template>
  <div>
    <!--面包屑导航区</h3>-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>管理</el-breadcrumb-item>
      <el-breadcrumb-item>房间列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!--卡片视图-->
    <el-card class="box-card">
      <!--搜索框-->
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="所属酒店">
          <el-select v-model="form.hotelId" placeholder="酒店">
            <el-option
                v-for="hotel in hotelList"
                :key="hotel.id"
                :label="hotel.hotelName"
                :value="hotel.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市">
          <el-input v-model="form.city" placeholder="城市"></el-input>
        </el-form-item>
        <el-form-item label="最低价格">
          <el-input v-model="form.minPrice" placeholder="最低价格"></el-input>
        </el-form-item>
        <el-form-item label="最高价格">
          <el-input v-model="form.maxPrice" placeholder="最高价格"></el-input>
        </el-form-item>
        <el-form-item label="房型">
          <el-select v-model="form.type" placeholder="房型">
            <el-option label="大床房" value="0"></el-option>
            <el-option label="标间" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getRoomList">查询</el-button>
        </el-form-item>
      </el-form>
      <!--新增-->
      <el-button type="primary" @click="showAddDialog">新增</el-button>
      <!--重置-->
      <el-button type="primary" @click="reset">重置</el-button>
      <!--表格-->
      <el-table
          stripe
          :data="roomList"
          border
          height="600px"
          style="width: 100%">
        <el-table-column width="60px" type="index"></el-table-column>
        <el-table-column align="center" prop="hotelName" label="酒店名" width="180"></el-table-column>
        <el-table-column align="center" prop="type" label="类型">
          <template slot-scope="scope">
            {{ scope.row.type ? '标间' : '大床房' }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="price" label="价格" width="100"></el-table-column>
        <el-table-column align="center" prop="roomNumber" label="房间号" width="180"></el-table-column>
        <el-table-column align="center" prop="roomStatus" label="状态">
          <template slot-scope="scope">
            {{ getRoomStatus(scope.row.roomStatus) }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="city" label="所在地" width="180"></el-table-column>

        <el-table-column
            align="center"
            label="操作">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="详情" placement="left">
              <el-button type="success" icon="el-icon-more" size="mini" @click="showMoreDialog(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="编辑" placement="right">
              <el-button type="info" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pageNum"
          :page-sizes="[10,15,20,30]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total">
      </el-pagination>
      <!--详情展示对话框-->
      <el-dialog
        :visible.sync="moreDialog"
        width="50%"
        @close="moreDialog = false"
      >
        <el-descriptions title="详细信息">
          <el-descriptions-item label="房间ID" >{{showDescription.id}}</el-descriptions-item>
          <el-descriptions-item label="房间号" >{{showDescription.roomNumber}}</el-descriptions-item>
          <el-descriptions-item label="房间类型" >{{showDescription.type === '0' ? '大床房' : '标间'}}</el-descriptions-item>
          <el-descriptions-item label="价格">{{showDescription.price}}</el-descriptions-item>
          <el-descriptions-item label="房间状态" >{{getRoomStatus(showDescription.roomStatus)}}</el-descriptions-item>
          <el-descriptions-item label="酒店ID">{{showDescription.hotelId}}</el-descriptions-item>
          <el-descriptions-item label="酒店名" >{{showDescription.hotelName}}</el-descriptions-item>
          <el-descriptions-item label="联系地址" >{{showDescription.address}}</el-descriptions-item>
          <el-descriptions-item label="酒店所在城市" >{{showDescription.city}}</el-descriptions-item>
          <el-descriptions-item label="电话" >{{showDescription.phone}}</el-descriptions-item>
          <el-descriptions-item label="酒店状态" >{{getHotelStatus(showDescription.hotelStatus)}}</el-descriptions-item>
        </el-descriptions>
      </el-dialog>
      <!--新增对话框-->
      <el-dialog
          title="添加房间"
          :visible.sync="addDialog"
          width="50%"
          @close="addDialog = false"
      >
        <el-form :model="addForm" ref="form" label-width="120px">
          <el-form-item label="房间号">
            <el-input v-model="addForm.roomNumber"></el-input>
          </el-form-item>
          <el-form-item label="价格">
            <el-input v-model="addForm.price"></el-input>
          </el-form-item>
          <el-form-item label="房间类型">
            <el-select v-model="addForm.type" placeholder="房间类型">
              <el-option label="标间(1)" value="1"></el-option>
              <el-option label="大床房(0)" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属酒店">
            <el-select v-model="addForm.hotelId" placeholder="酒店">
              <el-option
                  v-for="hotel in hotelList"
                  :key="hotel.id"
                  :label="hotel.hotelName"
                  :value="hotel.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="房间状态">
            <el-select v-model="addForm.roomStatus" placeholder="状态">
              <el-option
                  v-for="status in roomStatus"
                  :key="status.value"
                  :label="status.label"
                  :value="status.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addRoom">确定</el-button>
            <el-button @click="addDialog = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!--编辑对话框-->
      <el-dialog
          title="编辑房间信息"
          :visible.sync="editDialog"
          width="50%"
          @close="editDialog = false"
      >
        <el-form :model="editForm" ref="form" label-width="120px">
          <el-form-item label="房间号">
            <el-input v-model="editForm.roomNumber"></el-input>
          </el-form-item>
          <el-form-item label="价格">
            <el-input v-model="editForm.price"></el-input>
          </el-form-item>
          <el-form-item label="房间类型">
            <el-select v-model="editForm.type" placeholder="房间类型">
              <el-option
                  v-for="o in getRoomType"
                  :key="o.value"
                  :label="o.label"
                  :value="o.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属酒店">
            <el-select v-model="editForm.hotelId" placeholder="酒店">
              <el-option
                  v-for="hotel in hotelList"
                  :key="hotel.id"
                  :label="hotel.hotelName"
                  :value="hotel.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="房间状态">
            <el-select v-model="editForm.roomStatus" placeholder="状态">
              <el-option
                  v-for="status in roomStatus"
                  :key="status.value"
                  :label="status.label"
                  :value="status.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updateRoom(id)">确定</el-button>
            <el-button @click="editDialog = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import axios from "axios";

export default {
  name: "RoomTable",
  data() {
    return {
      roomList: [],
      moreDialog:false,
      editDialog: false,
      addDialog: false,
      form: {
        hotelId:'',
        type: '',
        city: '',
        minPrice: '',
        maxPrice: '',
      },
      addForm: {
        roomNumber: '',
        type: '',
        price: '',
        roomStatus: '',
        hotelId: '',
      },
      editForm:{
        id:'',
        roomNumber: '',
        type: '',
        price: '',
        roomStatus: '',
        hotelId: '',
      },
      showDescription:{
        // id:'',//房间id
        // roomNumber:'',//房间号
        // type:'',//房间类型 0大床房 1标间
        // price:'',//价格
        // roomStatus:'',//房间状态 0空闲 1预定 2已入住 3维修中
        // hotelId:'',//酒店id
        // hotelName:'',//酒店名
        // address:'',//酒店地址
        // city:'',//酒店所在城市
        // phone:'',//电话
        // hotelStatus:'',//酒店状态 0营业 1不营业
        // createTime:'',//创建时间
        // updateTime:'',//更新时间
      },
      hotelList: [],
      roomStatus:[
          {label:"空闲", value:0},
          {label:"预定", value:1},
          {label:"已入住", value:2},
          {label:"维修中", value:3},
      ],
      getRoomType:[
        {
          label:'大床房',
          value:0
        },
        {
          label: '标间',
          value: 1
        }
      ],
      //分页数据
      queryInfo: {
        query: '',
        pageNum: 1,
        pageSize: 10,
      },
      //总数
      total: 0,
    }
  },
  methods: {
    //当前页显示条数改变
    handleSizeChange(val) {
      this.queryInfo.pageSize = val
      this.getRoomList()
    },
    //当前页数改变
    handleCurrentChange(val) {
      this.queryInfo.pageNum = val;
      this.getRoomList()
    },
    //更新房间
    async updateRoom() {
      const {data: result} = await axios.post("/api/room/update",this.editForm)
      if (result.code === 0) {
        this.$message.success('修改成功')
        await this.getRoomList()
      } else
        this.$message.error(result.message||result.description)
      this.editDialog = false
    },

    //新增房间方法
    async addRoom() {
      const {data: result} = await axios.post("/api/room/add", this.addForm)
      if (result.code === 0) {
        this.$message.success('添加成功')
        await this.getRoomList()

      } else
        this.$message.error(result.description)
      this.addDialog = false
    },

    //获取房间信息
    async getRoomList() {
      const urlBase = '/api/room/search';
      //分页参数
      const pageSize = this.queryInfo.pageSize;
      const pageNumber = this.queryInfo.pageNum;
      //条件查询参数
      const hotelId=this.form.hotelId
      const type=this.form.type
      const city=this.form.city
      const minPrice=this.form.minPrice
      const maxPrice=this.form.maxPrice
      //组装参数
      let queryParams = `pageSize=${pageSize}&pageNumber=${pageNumber}`;
      if (hotelId) { queryParams += `&hotelId=${hotelId}`}
      if (type) { queryParams += `&type=${type}`}
      if (city) { queryParams += `&city=${city}`}
      if (minPrice) { queryParams += `&minPrice=${minPrice}`}
      if (maxPrice) { queryParams += `&maxPrice=${maxPrice}`}
      const url = `${urlBase}?${queryParams}`;
      const {data: res} = await axios.get(url)
      // console.log(res)
      if (res.code!==0){
        this.$message.error(res.description||res.message)
        return
      }
      this.roomList = res.data.rows;
      this.total = res.data.total;
    },

    //计算房间状态
    getRoomStatus(status) {
      switch (status) {
        case 0:
          return '空闲';
        case 1:
          return '预定';
        case 2:
          return '已入住';
        case 3:
          return '维修中';
        default:
          return '未知状态';
      }
    },

    //计算酒店状态
    getHotelStatus(status){
      switch (status) {
        case 0:
          return '营业';
        case 1:
          return '不营业';
        default:
          return '未知状态';
      }
    },

    //显示新增对话框
    showAddDialog() {
      this.addDialog = true
      this.getHotelList()
    },
    //显示编辑对话框
    showEditDialog(row){
      this.editDialog = true
      this.getHotelList()
      this.editForm = {...row};
    },
    showMoreDialog(row){
      this.moreDialog=true
      this.showDescription = {...row};
    },
    //重置表单
    reset() {
      this.form={}
      this.getRoomList();
    },

    //获取酒店信息
    async getHotelList() {
      const {data: res} = await axios.get('/api/hotel/search')
      this.hotelList = res.data;
    },
    async fetchData() {
      try {
        await this.getRoomList();
        await this.getHotelList()
      } catch (error) {
        this.$message.error(error);
      }
    },
  },
  created() {
    this.fetchData()
  },
}
</script>
<style scoped>

</style>